<!--  -->
<template>
  <el-container >
    <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="6">
             <span>网关分组 &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value1" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in option1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-col>
           <el-col :span="6">
             <span>前端服务名 &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value1" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in option1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-col>
           <el-col :span="6">
             <span>前端API路径 &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value1" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in option1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-col>
           <el-col :span="6">
             <span>请求方法 &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value1" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in option1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-col>
    </el-row>
    <el-row :gutter="20">
         <el-col :span="6">
             <span>插件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value1" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in option1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-col>
           <el-col :span="6">
             <span>访问 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value1" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in option1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-col>
           <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
           </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
             <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="#"
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="group"
      label="网关分组"
      width="180">
    </el-table-column>
    <el-table-column
      prop="type"
      label="路由类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="前端服务名"
       width="400"
      >
    </el-table-column>
     <el-table-column
      prop="api"
      label="前端API路径"
       width="350"
      >
    </el-table-column>
     <el-table-column
      prop="method"
      label="请求方法"
       width="150"
      >
    </el-table-column>
     <el-table-column
      prop="plugin"
      label="插件"
       width="350"
      >
    </el-table-column>
     <el-table-column
      prop="visit"
      label="访问"
       width="150"
      >
       <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '允许' ? 'success' : 'danger'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
     <el-table-column
      label="操作"
      width="345">
      <template slot-scope="scope">
         <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-col>
</el-row>
    <el-row>
      <el-col>
          <el-pagination
            class="pagination-box"
            background
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
      </el-col>
    </el-row>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
          option1: [{
          value: '1',
          label: '22222'
        }, {
          value: '2',
          label: '/api/test'
        }, {
          value: '3',
          label: '3333'
        }],
        value2: '',
        options3: [{
           value: '1',
          label: '10.2.2.2'
        }],
        value1: '',
         tableData: [{
          group: '01',
          type: 1,
          name: 'ddddd',
          api: '/**',
          method: 'POST',
          plugin: '访问请求体',
          tag: '允许'
        }, {
           group: 'cc',
           type: 2,
           name: 'test',
           api: '/qian duan api',
           method: 'DELETE',
           plugin: 'redis鉴权缓存',
           tag: '允许'
        }, {
          group: '默认分组',
          type: 3,
          name: 'api/myservice',
          api: '/qian duan api',
          method: 'PUT',
          plugin:'JWT',
          tag: '允许'
        }, {
          group: '测试',
          type: 4,
          name: 'apollo-adminservices',
          api: '/qian duan api',
          method: 'GET',
           plugin:'JWT',
           tag: '不允许'
        }],
        // 总数
        total: 4,
    };
  },

  methods: {
    handleAdd() {
      this.$router.push('/getway/routingDetail');
    }
  },
  filters:{
    getType(type) {
      if(type===1) {
        return '服务编排';
      }
      if(type===2) {
        return '反向代理';
      }
      if(type===3) {
        return '服务发现';
      }
    }
  },

  components: {},

  computed: {},

  mounted() {},

}

</script>
<style lang='scss' scoped>
 .box-card {
    width: 100%;
    margin: 15px 0;
  }
  .el-col {
      text-align: left;
      span {
          font-size: 14px;
      }
  }
  /deep/.el-select {
      width: 280px;
  }
  .el-row {
     margin: 15px 0;
   } 
   .pagination-box {
    float: right;
   }
</style>